<script setup>
import emitter from "@/utils/mitt"
import {reactive,toRefs,ref, onUnmounted, inject} from 'vue'

emitter.on('friend', detail)
const {newMsg} = inject('newMsg')
let friend = ref({})
function detail(e){
    friend.value = e
    console.log('friend' + e.name)
}
onUnmounted(()=>{
    console.log('卸载emmiter监听 friend')
    emitter.off('friend',detail)
})
</script>
<template>
   <div class="right-main">
       <div class="content">
            <div class="text-align-center">{{friend.name}}</div>
            <div class="text-align-center send_mess">
                <el-button type="success" @click="newMsg(friend)">发送消息</el-button>
            </div>
       </div>
   </div>
</template>
<style scoped>
.content{
    margin-top: 100px;
}
.send_mess{
    margin-top: 40px;
}
.right-main {
    width: 600px;
    min-height: 600px;
    height: 100%;
    overflow: hidden;
    background-color: rgb(245, 245, 245);
    border-right: 1px solid rgb(222, 222, 222);
}
</style>